<template>
  <div class="page_content daraBoardStreetAnalysis_content">
    <div class="header_box p-10 bold flex flex-ac flex-jsb">
      <div class="title bold">车辆收运垃圾总量</div>
    </div>
    <div class="main_box m-10 grid">
      <div class="lint_box lint_boxLeft">
        <div
          v-for="(item, inx) in otherVehiclesList"
          :key="inx"
          class="main_box_item main_boxLeft mb-15 flex flex-ac mr-20"
        >
          <div class="txt_right ml-10">{{ item.license_number }}</div>
          <div class="progress_container">
            <el-progress
              :text-inside="true"
              type="line"
              :format="format"
              :stroke-width="16"
              :percentage="item.garbage_weight"
              style="width: 100%"
              class="el-bg-inner-running custom_progress"
              reverse
            ></el-progress>
          </div>
        </div>
      </div>
      <div ref="mainEchart" class="main_echart"></div>
      <div class="lint_box">
        <div
          v-for="(item, inx) in kitchenWasteVehiclesList"
          :key="inx"
          class="main_box_item main_boxRight mb-15 flex flex-ac"
        >
          <div class="mr-10">{{ item.license_number }}</div>
          <el-progress
            :text-inside="true"
            :stroke-width="16"
            :format="format"
            :percentage="item.garbage_weight"
            style="width: 70%"
            class="el-bg-inner-running"
          ></el-progress>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
  onUnmounted,
} from "vue";
import { vehicleWasteStatisticsApi } from "@/api/dataBoard";
import * as echarts from "echarts";

import { useMousePosition } from "@/hooks/dateSelect.ts";
const { timeType } = useMousePosition();
console.log(3333, timeType);

const props: any = defineProps({});
const vehicleWasteStatisticsObj: any = reactive({
  data: {
    seriesData: [],
  },
});
const mainEchart = ref<any>(null);
const myChart = shallowRef();
const otherVehiclesList = ref([
  {
    label: "园区xxx",
    value: 80,
  },
]);
const kitchenWasteVehiclesList = ref([
  {
    label: "园区xxx",
    value: 80,
  },
]);
const format = (percentage) => {
  return `${percentage}吨`;
};

watch(
  timeType,
  () => {
    init();
  },
  {
    immediate: true,
  }
);
onMounted(() => {
  myChart.value = echarts.init(mainEchart.value);
  chartInit();
  window.addEventListener("resize", handleResize);
});
function init() {
  getAssetStatistics();
}
// 数据看板_企业-车辆收运垃圾总量
async function getAssetStatistics() {
  vehicleWasteStatisticsObj.data.seriesData = [];
  let info = {
    timeType: timeType.value || 0,
  };
  const res = await vehicleWasteStatisticsApi(info);
  if (res.status != 200) return;
  console.log("数据看板_企业-车辆收运垃圾总量", res, res?.data);
  let { result = {} } = res?.data; 

  kitchenWasteVehiclesList.value = result?.kitchenWasteVehicles;
  otherVehiclesList.value = result?.otherVehicles;
  let kitchenWasteVehiclesVal = result?.kitchenWasteVehicles.reduce(
    (accumulator, currentValue) => {
      return accumulator + currentValue.garbage_weight;
    },
    0
  );
  let otherVehiclesVal = result?.otherVehicles.reduce(
    (accumulator, currentValue) => {
      return accumulator + currentValue.garbage_weight;
    },
    0
  );
  vehicleWasteStatisticsObj.data.seriesData = [
    { value: otherVehiclesVal, name: "其他车辆" },
    { value: kitchenWasteVehiclesVal, name: "厨余车辆" },
  ]; 
  chartInit();
  // otherVehicles 其他车辆
  // kitchenWasteVehicles 厨余车辆
  // garbage_weight重量  license_number车牌
}

onBeforeUnmount(() => {});
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
const chartInit = () => {
  let color = ["#FF8700", "#ffc300", "#00e473", "#009DFF"];
  // 绘制图表
  myChart.value.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "5%",
      left: "center",
    },
    series: [
      {
        name: "车辆收运垃圾总量",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: vehicleWasteStatisticsObj.data.seriesData || [],
      },
    ],
  });
};
const handleResize = () => {
  if (myChart.value) {
    // console.log(7777, myChart.value);
    // 调用Echarts实例的resize方法，重新绘制图表
    myChart.value.resize();
  }
};
</script>

<style lang="scss" scoped>
.daraBoardStreetAnalysis_content {
  height: 400px;
  .header_box {
  }
  .main_box {
    grid-template-columns: 1.2fr 1fr 1.2fr;
    grid-gap: 20px;
    .lint_boxLeft {
      direction: rtl;
    }
    .lint_box::v-deep {
      height: calc(400px - 35px - 20px);
      overflow-y: auto;

      .main_boxLeft {
        // justify-content: flex-end;
        .txt_right {
          // text-align: right;
        }
      }
      .progress_container {
        width: 70%;
        display: flex;
        justify-content: center;
        .custom_progress {
          .el-progress-bar__inner {
            text-align: right;
            left: auto;
            right: 0;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            // border: 1px solid #fff;
          }
        }
      }
    }

    .main_echart {
      width: 100%;
      height: calc(400px - 35px - 20px);
    }
  }
}
.main_boxRight::v-deep {
  /* 渐变进度条 */
  .el-bg-inner-running .el-progress-bar__inner {
    background-color: unset;
    background-image: linear-gradient(to right, #6cc742, #abe492) !important;
  }
}
.progress_container::v-deep {
  /* 渐变进度条 */
  .el-bg-inner-running .el-progress-bar__inner {
    background-color: unset;
    background-image: linear-gradient(to right, #abbef7, #5573cf) !important;
  }
}
</style>
 